<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局column</title>
</head>
<style>
    .outer {
        /* 分成几列  也可以是像素值 如200px */
        columns: 3;

        /* 列的间距 */
        column-gap: 30px;
        /* 列与列之间的边框风格 */
        column-rule: 1px solid red;
    }

    h1 {
        text-align: center;
        /* 跨列：要么0不跨，要么all全跨 */
        column-span: all;
    }

    img {
        width: 100%;
    }
</style>

<body>
    <!-- 同理：可以用这个方法实现图片的瀑布流部署 -->
    <div class="outer">
        <h1>《新闻稿标题》</h1>
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
        <img src="./assets/earth.png">
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
        <p>【开始】季棠棠原本是一个普通的大学生，人长的漂亮，家境尚可，还有爱她的父母。大二那年的寒假回家过年，却突然遭遇家中变故，父母都惨死于一场煤气火灾，她当时刚好在楼下跟男朋友打电话。看到家中升起腾腾大火的时候，一切都来不及了。想到母亲两分钟前给她发来的短信，根据信息里的说法，她得知了一个大秘密。
        </p>
    </div>
</body>

</html>